<template>
    <div id="table" class="app-container calendar-list-container">
        <!-- 查询和其他操作 -->
        <div class="filter-container" style="margin: 10px 0 10px 0;">
            <el-button class="filter-item" type="primary" icon=" el-icon-edit" v-permission="'/picture/add'">添加</el-button>
            <!--      <el-button class="filter-item" type="primary" @click="handleReturn" icon="el-icon-s-promotion">返回分类</el-button>-->
            <el-button class="button" type="primary" icon="el-icon-refresh" @click="checkAll()">{{ chooseTitle
            }}</el-button>
            <el-button class="filter-item" type="danger" icon="el-icon-delete"
                v-permission="'/picture/delete'">删除选中</el-button>
            <el-button class="filter-item" type="success" icon="el-icon-video-camera-solid"
                v-permission="'/picture/setCover'">设为封面</el-button>
        </div>

        <el-tabs v-model="activeName" type="border-card" tab-position="left" style="height: 800px; width: 100%;"
            @tab-click="clickTab">

            <el-tab-pane style="height: 800px; width: 100%; overflow:auto;" v-for="(item, index) in pictureSorts"
                :key="index">
                <div class="sortItem" slot="label" style="float:left">
                    <i class="el-icon-picture"></i>
                    {{ item.name }}
                </div>

                <el-row>
                    <el-col v-for="(picture, index) in tableData" v-if="picture.pictureUrl" :key="picture.uid"
                        style="padding: 6px" :xs="24" :sm="12" :md="12" :lg="6" :xl="4">
                        <el-card :body-style="{ padding: '0px', textAlign: 'center' }" shadow="always">
                            <input style="position: absolute;z-index: 100;" type="checkbox" :id="picture.uid"
                                :checked="pictureUids.indexOf(picture.uid) >= 0">

                            <el-image :src="picture.pictureUrl" style="cursor:pointer" fit="scale-down" />
                            <div @click="showPicture(picture.pictureUrl)">
                                <span class="media-title" v-if="picture.picName">{{ picture.picName }}</span>
                                <span class="media-title" v-else>图片 {{ index + 1 }}</span>
                            </div>

                            <div style="margin-bottom: 14px;">
                                <el-tooltip class="item" effect="dark" content="删除图片" placement="bottom-start"
                                    style="margin-right: 2px" v-permission="'/picture/delete'">
                                    <el-button type="danger" size="mini" icon="el-icon-delete"
                                        @click="handleDelete(picture)" />
                                </el-tooltip>
                            </div>

                        </el-card>
                    </el-col>
                </el-row>

                <!--分页-->
                <div class="block">
                    <el-pagination :current-page.sync="currentPage" :page-size="pageSize"
                        layout="total, prev, pager, next, jumper" :total="total" @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </el-tab-pane>

        </el-tabs>
    </div>
</template>

<script>
import { getPictureSortList } from '@/api/pictureSort'
import { getPictureList, deleteBatchPicture } from '@/api/picture'
export default {
    name: '',
    created() {

        //传递过来的pictureSordUid
        this.pictureSortUid = this.$route.query.pictureSortUid;
        // console.log(this.pictureSortUid);
        this.initPictureSortList()
    },
    data() {
        return {
            dialogImageUrl: "", //图片显示地址
            checkedPicture: {}, // 单选的图片
            pictureCropperVisible: false, // 裁剪图片框是否显示
            dialogPictureVisible: false,
            uploadPictureHost: null,
            fileList: [],
            pictureSortUid: undefined, // 当前选中的图片分类uid
            pictureSort: {}, //当前选中的图片分类
            pictureUids: [], //图片uid集合
            pictureUploadList: [], //图片上传列表
            chooseTitle: "全选",
            isCheckedAll: false, //是否全选
            fileUids: "", //上传时候的文件uid
            form: {
                uid: null,
                fileUid: null,
                picName: null,
                pictureSortUid: null
            },
            tableData: [], //显示的图片列表
            count: 0, //计数器，用于记录上传次数
            loading: true,
            currentPage: 1,
            pageSize: 4,
            total: null,
            title: "增加图片",
            dialogFormVisible: false,
            keyword: "",
            reFresh: true, //是否刷新组件
            activeName: '0',
            pictureSorts: [],
            havePictureSorts: false, //是否加载完图片分类
        };
    },
    methods: {
        initPictureSortList() {
            //先加载分类
            let that = this
            if (!this.havePictureSorts) {
                let params = {}
                params.pageSize = 500
                params.currentPage = 1
                getPictureSortList(params).then(res => {
                    if (res.code == 200) {
                        let pictureSorts = res.data.records
                        that.pictureSorts = pictureSorts
                        if (pictureSorts.length > 0) {
                            // 判断是否通过图片分类跳转的
                            let pictureSortUid = this.pictureSortUid
                            // 如果没有值，则默认赋值
                            if (pictureSortUid == undefined) {
                                this.pictureSortUid = pictureSorts[0].uid
                                pictureSortUid = pictureSorts[0].uid;
                                // 设置默认选中的图片分类
                                that.pictureSort = pictureSorts[0]
                            } else {
                                // console.log('不为空');
                                // 如果不为空，则说明是图片分类跳转过来的，找出当前的坐标
                                // console.log(pictureSortUid);
                                for (let i = 0; i < pictureSorts.length; i++) {
                                    if (pictureSorts[i].uid == pictureSortUid) {
                                        // 设置选中的分类和激活的index
                                        that.activeName = '' + i
                                        that.pictureSort = pictureSorts[i]
                                    }
                                }
                                // console.log(that.activeName);
                            }
                            this.clickTab(null)
                        }

                    }
                })
            }

        },
        clickTab(e) {
            if (e != null) {
                this.activeName = '' + e.index
            }
            let index = this.activeName
            // 拿到当前分类的uid
            this.pictureSortUid = this.pictureSorts[index].uid
            this.pictureSort = this.pictureSorts[index]
            let name = this.pictureSorts[index].name
            let params = {}
            params.currentPage = 1;
            params.pageSize = this.pageSize;
            params.pictureSortUid = this.pictureSortUid;

            getPictureList(params).then(res => {
                this.currentPage = res.data.current
                this.pageSize = res.data.size
                this.total = res.data.total
                this.tableData = res.data.records
            })

        },
        // 删除选择
        handleDelete(picture) {
            // console.log(picture.picName);
            this.pictureUids = [picture.uid]
            this.handleDeleteBatch()
        },
        // 批量删除
        handleDeleteBatch() {
            if (this.pictureUids.length <= 0) {
                this.$commonUtil.message.error("请先选中图片!")
                return;
            }
            this.$confirm("是否删除选中图片？, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                let params = {}
                params.uid = this.pictureUids.join(",");
                deleteBatchPicture(params).then(res => {
                    if (res.code == 200) {
                        // this.$commonUtil.message.success(res.message)
                        // 清空选中的列表
                        this.pictureUids = []
                        this.checkedPicture = []
                        // 分页
                        this.handleCurrentChange(this.currentPage)
                        this.chooseTitle = '全选'
                        this.isCheckedAll = false
                    }
                })
            }).catch(() => {
                // this.$commonUtil.message.info("已取消删除")
                this.pictureUids = []

            })
        },
        // 处理分页
        handleCurrentChange(currentPage) {
            let params = {}
            params.pictureSortUid = this.pictureSortUid
            params.currentPage = currentPage
            params.pageSize = this.pageSize
            getPictureList(params).then(response => {
                if (response.code == 200) {
                    this.pageSize = response.data.size
                    this.currentPage = response.data.current
                    this.total = response.data.total
                    this.tableData = response.data.records
                }
            })
        },
        checkAll() {
            // 如果是全选
            if (!this.isCheckedAll) {
                this.chooseTitle = '取消全选'
                this.tableData.forEach(element => {
                    this.pictureUids.push(element.uid)
                });
                this.isCheckedAll = true
            } else {
                this.chooseTitle = '全选'
                this.pictureUids = []
                this.isCheckedAll = false
            }

        }
    }
}
</script>

<style scoped>
.media-title {
    color: #8492a6;
    font-size: 14px;
    padding: 3px;
    display: inline-block;
    white-space: nowrap;
    width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>